<!--
 * @Author: 小陆同学 1361176289@qq.com
 * @Date: 2024-06-24 08:58:56
 * @LastEditors: 小陆同学 1361176289@qq.com
 * @LastEditTime: 2024-08-11 19:19:23
 * @FilePath: \loCode\src\components\prTooth\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="tooth" :style="{ width: `${width + 50}px`, height: `${height}px` }">
		<div v-for="section in sections" :key="section.name" class="tooth-item" :style="{ width: `${width / 2}px`, height: `${height / 2}px` }">
			<div v-for="tooth in section.teeth" :key="tooth.id" class="tooth-item-item">
				{{ tooth.displayId }}
			</div>
		</div>
	</div>
</template>

<script setup>
	import { computed, onMounted, ref, watch } from "vue";

	const props = defineProps({
		width: { type: Number, default: 200 },
		height: { type: Number, default: 25 },
		Tooth: { type: String, default: "" },
		text: { type: String, default: "" },
	});

	const sections = ref([
		{ name: "upper-left", teeth: [] },
		{ name: "upper-right", teeth: [] },
		{ name: "lower-left", teeth: [] },
		{ name: "lower-right", teeth: [] },
	]);

	onMounted(() => update());

	watch(
		() => props,
		() => update(),
		{ deep: true }
	);

	const update = () => {
		const toothLabel = [0, 18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28, 48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38];
		const tooth = props.Tooth ? props.Tooth.split(",").map(Number) : props.text.split(",").map(Number);

		const toothSections = [
			{ name: "upper-left", start: 1, end: 9 },
			{ name: "upper-right", start: 9, end: 17 },
			{ name: "lower-left", start: 17, end: 25 },
			{ name: "lower-right", start: 25, end: 33 },
		];

		toothSections.forEach((section) => {
			const teethInRange = toothLabel.slice(section.start, section.end);
			const foundTeeth = teethInRange.filter((t) => tooth.includes(t));
			sections.value.find((s) => s.name === section.name).teeth = foundTeeth.map((id) => ({ id, displayId: id }));
		});
	};
</script>

<style lang="scss" scoped>
	.tooth {
		width: 350px;
		user-select: none;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		&-item {
			width: calc(350px / 2);
			height: 25px;
			display: flex;
			align-items: center;
			padding: 5px;
			font-size: 14px;

			&:nth-child(1),
			&:nth-child(3) {
				border-right: 1px dashed #909399;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			&:nth-child(1),
			&:nth-child(2) {
				border-bottom: 1px dashed #909399;
			}

			&-item {
				margin: 0 2.5px;
			}
		}
	}
</style>
